<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
    <title>grid</title>
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="grid-flex.css">
    <!-- <link rel="stylesheet" href="index.css"> -->
    <!-- 参考链接：flex栅格布局：https://article.itxueyuan.com/L3gv5R -->
    <style>
        .mybtn {
            width: 50px;
            background-color: #ff0000;
            border-radius: 7px;
            color: #fff;
            font-weight: bolder;
            text-align: center;
            padding: 2px;
            cursor: pointer;
        }

        #header-right {
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }

        .closebtn {}

        .mymum {
            /* width: 130px; */
        }

        .mymum input {
            width: 30px;
        }

        .font-red {
            color: red;
        }

        .js_foot {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
    </style>
</head>

<body>
    <a href="1.html">1.html</a>
    <a href="javascript:history.forward()">向前</a>
    <a href="javascript:location.replace('http://www.baidu.com')">重加载</a>
    <header class="header-container">
        <div class="container">
            <div class="row">
                <div class="col-6">

                    <img src="./imgs/dangdanglog.jpg" alt="">
                </div>
                <div class="col-6" id="header-right">
                    现在时间：
                    <div id="mytime">17:09:10</div>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <a href="javascript:stopTime()">停止时间</a>
                    <div class="mybtn closebtn" onclick="closeTab()">关闭</div>
                </div>
            </div>
        </div>
    </header>

    <div class="center-container">
        <div class="container">
            <div class="row">
                <div class="col-2">
                    <input type="checkbox" name="" id="">全选
                </div>
                <div class="col-2">
                    商品信息
                </div>
                <div class="col-2">
                    单价（元）
                </div>
                <div class="col-2">
                    数量
                </div>
                <div class="col-2">
                    金额（元）
                </div>
                <div class="col-2">
                    操作
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <input type="checkbox" name="" id="">当 当当自营
                </div>
            </div>
            <!-- 行记录start -->
            <div class="row">
                <div class="col-2">
                    <input type="checkbox" name="" id="">
                    <img src="./imgs/html5.jpg" style="width:70px;height: 80px;" alt="">

                </div>
                <div class="col-2">
                    白岩松：白说
                </div>
                <div class="col-2" id="price_1">
                    $21.90
                </div>
                <div class="col-2">
                    <div class="mymum">
                        <input type="button" value="-" onclick="minNum(1)">
                        <input type="text" name="" id="cur_num_1" value="2" onchange="jisuan(1)">
                        <input type="button" value="+" onclick="addNum(1)">
                    </div>
                </div>
                <div class="col-2" id="total_price_1">
                    $43.8
                </div>
                <div class="col-2">
                    <a href="javascript:alert('已收藏')">移入收藏</a><br />
                    <a href="javascript:remRow(1)" id="del_1">删除</a>
                </div>
            </div>
            <div class="row">
                <div class="col-2">
                    <input type="checkbox" name="" id="">
                    <img src="./imgs/html5.jpg" style="width:70px;height: 80px;" alt="">

                </div>
                <div class="col-2">
                    岛上书店
                </div>
                <div class="col-2" id="price_2">
                    $24.00
                </div>
                <div class="col-2">
                    <div class="mymum">
                        <input type="button" value="-" onclick="minNum(2)">
                        <input type="text" name="" value="1" id="cur_num_2" onchange="jisuan(2)">
                        <input type="button" value="+" onclick="addNum(2)">
                    </div>
                </div>
                <div class="col-2" id="total_price_2">
                    $24.00
                </div>
                <div class="col-2">
                    <a href="javascript:alert('已收藏')">移入收藏</a><br />
                    <a href="javascript:remRow(2)" id="del_2">删除</a>
                </div>
            </div>
            <!-- 行记录end -->
        </div>
    </div>
    <div class="footer-container">
        <div class="container">
            <div class="row">
                <div class="col-6">
                    <input type="checkbox" value="">全选
                    <a href="">批量删除</a>
                    已选择<span class="font-red">2</span>件商品

                </div>
                <div class="col-6 js_foot">
                    <div>
                        <p>总计（不含运费）：$67.8</p>
                        <p>已节省：$0.00</p>
                    </div>
                    <div class="mybtn" onclick="">结算</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        console.log(document.referrer);
        console.log(document.URL);
        console.log(location.hostname);
        console.log(location.pathname);
        console.log(location.port);
        console.log(location.protocol);

        // document.write("<h1>5秒后跳转百度</h1>")
        // window.setTimeout(function(){
        //     window.location.href="http://www.baidu.com"
        // },5000)

        function closeTab() {
            if (confirm("是否退出？")) {
                window.close();
            }

        }

        function addNum(id) {
            debugger
            let curnum = document.getElementById("cur_num_" + id).value;
            if (curnum) {
                curnum = parseFloat(curnum);
                document.getElementById("cur_num_" + id).value = curnum + 1;
            }
            jisuan(id);
        }

        function minNum(id) {
            let curnum = document.getElementById("cur_num_" + id).value;
            if (curnum) {
                curnum = parseFloat(curnum);
                document.getElementById("cur_num_" + id).value = curnum - 1;
            }
            jisuan(id);
        }
        //计算价格
        function jisuan(id) {
            debugger
            let price = document.getElementById("price_" + id).innerText;
            if (price) {
                price = price.substring(1);
                price = parseFloat(price);
            }
            let curnum = document.getElementById("cur_num_" + id).value;
            if (curnum) {
                curnum = parseFloat(curnum);
            }
            //   https://www.cnblogs.com/NazLee/p/11646023.html
            //   （1）方法介绍
            // toFixed() 方法可以将数字转换为字符串，并指定小数点后保留几位。如果小数实际位数不够指定的位数，不足的部分会补 0。所有主要浏览器都支持 toFixed() 方法。
            // toFixed() 使用的是银行家舍入规则：四舍六入五取偶（又称四舍六入五留双）。
            // 银行家舍入法：
            // 四舍六入五考虑，五后非零就进一，五后为零看奇偶，五前为偶应舍去，五前为奇要进一。
            let totalPrice = (price * curnum).toFixed(2);
            let total_price = document.getElementById("total_price_" + id);
            total_price.innerHTML = "$" + totalPrice;
        }
        //直接执行
        let timer;
        (
            function () {
                //每秒修改1次

                timer = window.setInterval(function () {
                    var today = new Date();
                    let year = today.getFullYear();
                    let mon = today.getMonth() + 1;
                    let day = today.getDate();
                    var hh = today.getHours();
                    var mm = today.getMinutes();
                    var ss = today.getSeconds();
                    document.getElementById("mytime").innerHTML = year + "-" + mon + "-" + day + " " + hh +
                        ":" +
                        mm + ": " + ss;
                }, 1000);

            }
        )();

        function stopTime() {
            if (timer) {
                clearInterval(timer)
            }

        }

        function remRow(id) {
            let dela = document.getElementById("del_" + id)
            console.log(dela.parentNode.parentNode.remove());
        }
    </script>
</body>

</html>